<template>
    <div class="ui grid panel">
        <div class="nine wide column text-left">
            <router-link :to="{ name: 'article', params: { articleId: card.id }}">
                <p class="title"><strong>{{card.title}}</strong></p>
            </router-link>
            <div class="label">
                <div>
                    <p style="float:left;margin: 0">
                        <IconUpdateTime style=" float:left;margin-right: 3px"/>
                        {{card.updated_at|capitalize }}
                        <IconVerticalLine style="margin-right: 3px"/>
                    </p>
                    <div style="float:left;margin: 0">
                        <IconClassification style="float:left;margin-right: 3px"/>

                        <div class="ui tiny breadcrumb" style="margin-top: 14px">
                            <div v-for="(sort,index) in card.belong"
                                 style="display: inline-block;vertical-align: top;" :key="index">
                                <i class="right chevron icon" v-if="index!=0"></i>
                                <div class="section">{{sort}}</div>
                            </div>
                        </div>
                    </div>
                    <IconVerticalLine style="opacity: 0;"/>
                </div>
            </div>
            <p class="intro" style="float:left;">
                {{ card.introduction }}
            </p>
        </div>
        <div class="seven wide column img-right">
            <template v-if="!card.img">
                <img :src='randomNum(6,20)' class="img"/>
            </template>
            <template v-else>
                <img :src="card.img" class="img">
            </template>

        </div>
    </div>
</template>

<script>
    import IconVerticalLine from "./IconVerticalLine";
    import IconClassification from "./IconClassification";
    import IconUpdateTime from "./IconUpdateTime";

    export default {
        props: ['card'],
        name: "ArticleCardLeft",
        components: {
            IconVerticalLine,
            IconUpdateTime,
            IconClassification

        },
        computed: {},

        methods: {
            randomNum(min, max) {
                return require('@/assets/img/' + Math.floor(Math.random() * (max - min) + min) + '.jpg');
            },
        },
        filters: {
            capitalize: function (value) {
                return /\d{4}-\d{1,2}-\d{1,2}/g.exec(value)[0]; //将日期过滤，只输出年月日
            }
        }
    }


</script>

<style lang="scss" scoped>
    .panel {
        height: 12vw;
        width: 47vw;
        margin: 2vh;
        border-radius: 0.7vw;
        box-shadow: 3px 2px 7px #bababc;
    }

    .panel:hover {
        animation: beDeep 200ms ease-out;
        animation-fill-mode: forwards;
    }

    .panel:hover .img {
        animation: bigger 700ms;
        animation-fill-mode: forwards;
    }

    .img {
        height: 100%;
    }

    @keyframes bigger {
        from {
            height: 100%;
        }
        to {
            height: 105%;
        }
    }


    @keyframes beDeep {
        form {
            box-shadow: 2px 3px 6px #bababc;
        }
        to {
            box-shadow: 4px 5px 15px #bababc;
        }
    }


    .text-left {
        border-bottom-left-radius: 0.7vw;
        border-top-left-radius: 0.7vw;
    }


    .title {
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.5vw;
        margin: 0;
    }

    .label {
        text-align: left;
        color: gray;
        margin-bottom: 3px;
    }

    .intro {
        font-size: 0.9vw;
        text-align: left;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
        overflow: hidden;

    }

    @media screen and (max-width: 1130px) {
        .intro {
            text-align: left;
            display: -webkit-box !important;
            -webkit-box-orient: vertical !important;
            -webkit-line-clamp: 2 !important;
            overflow: hidden;
        }
    }

    @media screen and (max-width: 900px) {
        .intro {
            text-align: left;
            display: -webkit-box !important;
            -webkit-box-orient: vertical !important;
            -webkit-line-clamp: 1 !important;
            overflow: hidden;
        }
    }

    .img-right {
        overflow: hidden;
        height: 100%;
        width: 100%;
        padding: 0px !important;
        border-bottom-right-radius: 0.7vw;
        border-top-right-radius: 0.7vw;
    }

    a {
        color: #2c3e50;

        &:hover {
            animation: a_color 300ms;
            animation-fill-mode: forwards;
        }
    }

    @keyframes a_color {
        from {
            color: #2c3e50;
        }
        to {
            color: #35a2f4;
        }

    }


</style>
